<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div class="left_top_box">
    <Echart id="leftTop" :options="option" class="left_top_inner" ref="charts" />
  </div>
</template>

<script>
import { get } from "api";
export default {
  data() {
    return {
      option: {}
    };
  },
  created() {},
  mounted() {
    get("/admin/billboardCount").then(res => {
      if (res.code == 200) {
        let data = [
          { label: "审核中", value: 0, key: "auditTen" },
          { label: "正常", value: 0, key: "normalTen" },
          { label: "审核不通过", value: 0, key: "noPassTen" },
          { label: "检测已过期", value: 0, key: "expiredTen" },
          { label: "待整改", value: 0, key: "rectifyTen" },
          { label: "待拆除", value: 0, key: "waitRemoveTen" },
          { label: "已拆除", value: 0, key: "removedTen" }
        ];
        for (const key in res.data) {
          if (Object.prototype.hasOwnProperty.call(res.data, key)) {
            const e = res.data[key];
            let idx = data.findIndex(t =>t.key == key )
            if(idx != -1) {
              data[idx].value = e
            }
          }
        }
        this.init(data);
      }
    });
  },
  beforeDestroy() {},
  methods: {
    init(yData) {
      let colors = [
        "#B3F5FC",
        "#3CD1A3",
        "#DE7F3B",
        "#D3B659",
        "#469CB6",
        "#4273D0",
        "yellow",
        "red"
      ];
      let series = yData.map((t, index) => {
        let data = [0, 0, 0, 0, 0, 0];
        data[index] = t.value;
        return {
          type: "bar",
          barWidth: "60%",
          data: data,
          coordinateSystem: "polar",
          name: t.label,
          stack: "a",
          roundCap: true,

          itemStyle: {
            color: colors[index],
            barBorderRadius: 5
          },
          z: 2
        };
      });
      this.option = {
        backgroundColor: "black",
        angleAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        radiusAxis: {
          type: "category",
          //   data: ["其他", "资源加工工业", "轻纺工业", "机械电子制造业"],
          z: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        polar: {
          center: ["65%", "50%"]
        },
        tooltip: {
          show: false
        },
        series: series,
        legend: {
          //   bottom: 6,
          itemWidth: 30,
          orient: "vertical",
          left: 0,
          top: "middle",
          icon: "circle",
          itemHeight: 10,
          show: true,
          data: yData.map(t => t.label),
          selectedMode: false,
          textStyle: {
            color: "#96F5F6",
            fontSize: 22
          }
        }
      };
      //   [
      //       {
      //         type: "bar",
      //         barWidth: "60%",
      //         data: [12],
      //         coordinateSystem: "polar",
      //         name: "其他",
      //         stack: "a",
      //         // roundCap: true,
      //         // itemStyle: {
      //         //   color: "#BFA27C",
      //         //   barBorderRadius: 5
      //         // },
      //         // showBackground: true,
      //         // backgroundStyle: {
      //         //   color: "#27333F",
      //         //   barBorderRadius: 50
      //         // }
      //       },
      //       {
      //         type: "bar",
      //         data: [0, 25, 0, 0],
      //         coordinateSystem: "polar",
      //         name: "资源加工工业",
      //         stack: "a",
      //         roundCap: true,
      //         // itemStyle: {
      //         //   color: "#328CD9"
      //         // },
      //         // showBackground: true,
      //         // backgroundStyle: {
      //         //   color: "#27333F"
      //         // }
      //       },
      //       {
      //         type: "bar",
      //         data: [0, 0, 40, 0],
      //         coordinateSystem: "polar",
      //         name: "轻纺工业",
      //         stack: "a",
      //         roundCap: true,
      //         itemStyle: {
      //           color: "#1FB4A7",
      //           barBorderRadius: 5
      //         },
      //         showBackground: true,
      //         backgroundStyle: {
      //           color: "#27333F"
      //         }
      //       },
      //       {
      //         type: "bar",
      //         data: [0, 0, 0, 60],
      //         coordinateSystem: "polar",
      //         name: "机械电子制造业",
      //         stack: "a",
      //         roundCap: true,
      //         itemStyle: {
      //           color: "#424CB9",
      //           barBorderRadius: 5
      //         },
      //         showBackground: true,
      //         backgroundStyle: {
      //           color: "#27333F"
      //         }
      //       }
      //     ],
    }
  }
};
</script>
<style lang='scss' scoped>
.left_top_box {
  height: 100%;
}
.left_top_inner {
}
</style>